<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 全局作用域
        // foo函数作用域
        // bar作用域
        // ins作用域

        // 全局作用域 ==> foo函数的作用域 ==> bar 函数的作用域+ ins的函数作用域
        // 互相嵌套包含的关系 (上下级的关系) 关联在一起 作用域链
        // 当我们使用变量或者查找变量的时候 是沿着作用域链 一层层向上查找

        // 变量的查找规则
        // 它会现在自身作用域上找 找到就直接用 就近原则
        // 若是没有就像上找 直到找到全局作用域
        // 若是全局也没有则会报错


        function foo() {
            var x = 1;
            function bar() {
                var y = x + 1; // 找x,现在自身作用域查找,如果找不到,就到上一级作用域查找
                var z = 100;
            }
            var z = y + 1; // 找y 报错
            function ins() {
                x++;
                y++;
                var z = 1000;
            }
            bar();
            ins();
        }
        foo();

        var temp = 10;
        add();
        sum();
        function add() {
            temp++;
        }
        function sum() {
            temp = 20;
        }
    </script>
</body>

</html>